<template>
  <div class="table-wrap">
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      stripe
      @row-click="getDetails"
      style="width: 70vw;margin-left:4vw;"
    >
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="type" label="性质"></el-table-column>
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="address" label="操作">
        <ul class="operation">
          <li v-for="(item,index) in items" :key="index" >
            <el-button type="text" @click="onclickButton(index)">
              <a href="javascript:;" :class="item.color">{{item.text}}</a>
            </el-button>
          </li>
        </ul>
      </el-table-column>
    </el-table>
    <!-- 修改 item -->
    <el-dialog title="修改名称" :visible.sync="modifyFormVisible" width="30%" center>
      <span style="visibility: hidden;">{{id}}</span>
      <br />
      <span>账号：</span>
      <p style="width:80%;padding:10px 0 0 28px;display:inline-block;">{{account}}</p>
      <p>
        <br />
        <span>名称：</span>
        <el-input v-model="name" placeholder="请输入内容" style="width:80%;padding:10px 0 10px 28px;"></el-input>
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 重置密码 -->
    <el-dialog title="重置密码" :visible.sync="addFormVisible" width="30%" center>
      <span>账号：</span>
      <p style="width:300px;padding:10px 0 0 54px;display:inline-block;">{{account}}</p>
      <p>
        <br />
        <span>密码：</span>
        <el-input
          v-model="input3"
          show-password
          placeholder="请输入内容"
          style="width:290px;padding:10px 0 10px 56px;"
        ></el-input>
        <br />
        <span>确认密码：</span>
        <el-input
          v-model="input4"
          show-password
          placeholder="请输入内容"
          style="width:290px;padding:0 0 10px 28px;"
        ></el-input>
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlePassword">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="修改" :visible.sync="deleteFormVisible" width="30%" center>
      <p class="center">您确定要删除数据吗？</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelete">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      loading: true,
      modifyFormVisible: false,
      addFormVisible: false,
      deleteFormVisible: false,
      account: "", //账号
      name: "", //名称
      input3: "", //密码
      input4: "", //确认密码
      id: "",
      type: "",
      tableData: [],
      items: [
        {
          color: "modify",
          text: "修改"
        },
        {
          color: "modify",
          text: "重置密码"
        },
        {
          color: "delete",
          text: "删除"
        }
      ]
    };
  },
  mounted() {
    this.getuser();
  },
  methods: {


    getDetails(row) {
      let id = row.id;
      let name = row.name;
      let account = row.account;
      let type = row.type;
      this.id = id;
      this.account = account;
      this.name = name;
      this.type = type;
    },
    getuser() {
      let _this = this;
      _this
        .$http({
          method: "get",
          url: "/api/college/getCollegeByPage",
          params: {
            page: 1,
            limit: 99
          }
        })
        .then(function(response) {
          console.log(response.data.code);
          if (response.data.code === 0) {
            _this.tableData = response.data.data.result;
            for (var i = 0; i < _this.tableData.length; i++) {
              if (_this.tableData[i].type == 0) {
                _this.tableData[i].type = "大文类";
              } else if (_this.tableData[i].type == 1) {
                _this.tableData[i].type = "大理类";
              }
            }
          } else {
            console.log("test" + response.data.message);
          }
          _this.loading = false;
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    onclickButton: function(index,item) {
      if (index == 0) {
        this.modifyFormVisible = true;
      } else if (index == 1) {
        this.addFormVisible = true;
      } else if (index == 2) {
        this.deleteFormVisible = true;
      }
    },
    // 修改 item
    handleEdit: function() {
      let _this = this;
      let editType;
      if (_this.type == "大文类") {
        editType = 0;
      } else {
        editType = 1;
      }
      var editcoll = {
        id: _this.id,
        name: _this.name,
        type: editType
      };
      
      var url = "/api/college/editCollegeInfo";
      _this.$axios("post", url, editcoll, function(data) {
        _this.getuser();
        _this.modifyFormVisible = false;
      });
      this.getuser();
    },
    //删除 item
    handleDelete() {
      let _this = this;
      var deletecollege = {
        id: this.id
      };
      var url = "/api/college/deleteCollege";
      _this.$axios("post", url, deletecollege, function(data) {
        _this.deleteFormVisible = false;
        _this.getuser();
      });
      this.getuser();
    },

    // 重置密码
    handlePassword: function() {
      let _this = this;
      var reg = /^(\w*(?=\w*\d)(?=\w*[A-Za-z])\w*){6,20}$/;
      if (reg.test(_this.input3) && reg.test(_this.input4)) {
        if (_this.input3 !== _this.input4) {
          _this.$message.error("两次密码输入的不一致");
          return;
        }
      } else {
        _this.$message.error(
          "密码必须是长度为6到20位，且必须有数字、字母和下划线组成"
        );
        return;
      }
      var password1 = md5(this.account + this.input3);
      var password2 = md5(this.account + this.input4);
      var resetpassword = {
        id: this.id,
        password: password1,
        surePassword: password2
      };
      var url = "/api/college/editCollegePass";
      _this.$axios("post", url, resetpassword, function(data) {
        _this.addFormVisible = false;
        _this.getuser();
      });
      this.getuser();
      // this.$http({
      //     method: "post",
      //     // url: "/college/editCollegePass",
      //      url:"/api/college/editCollegePass",
      //     data: {
      //         id: this.id,
      //         password: this.input4,
      //         surePassword: this.input3
      //     }
      // })
      //       .then(function (response) {
      //           console.log(response)
      //           if (response.data.code === 0) {
      //               _this.message(true, response.data.msg, 'success');
      //           } else {
      //               _this.message(true, response.data.msg, 'error');
      //           }
      //       })
      //       .catch(function (error) {
      //           _this.message(true, '系统错误，请刷新后重试', 'error');
      //       });
    }
  }
};
</script>

<style scoped>
.modify {
  color: rgb(90, 172, 247);
  margin-right: 0.8vw;
}
.delete {
  color: rgba(206, 47, 52, 1);
}
.table-wrap {
  height: 54vh;
  overflow-y: scroll;
}
.operation > li {
  display: inline-block;
}
.center {
  text-align: center;
}
</style>

